<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        form{
            width: 500px;
            padding: 20px;
            margin: 50px auto;
            border: 3px solid pink;
            display: flex;
            flex-direction: column;
            font-size: 30px;
            padding-top: 50px;
            position: relative;
        }

        form>span{
            position: absolute;
            left: 50%;
            top: 5px;
            transform: translateX(-50%);
            text-align: center;
            color: red;
            display: none;
        }
        form>
        label{
            height: 50px;
        }
        form>label>input{
            font-size: 24px;
            height: 40px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <form>
        <span class="error">用户名或者密码错误</span>
        <label>
            用户名：<input class="username" type="text">
        </label>
        <label>
            密码：<input class="password" type="text">
        </label>
        <button>登录</button>
    </form>
    <script>
        /*
        案例-登录

        分析需求：
          +问题1：什么时候进行发送请求
            =>点击登录按钮的时候
            =>需要给form标签绑定一个表单提交事件
          +问题2：需要拿到哪些信息
             =>需要拿到用户填写的用户名和密码
          +问题3：需要如何发送给后端？
             =>按照接口文档的规范进行发送
          +问题4：请求完成以后，我们需要做什么？
             =>根据后端返回的信息。进行一些后续的操作
             =>根据后端返回的信息是登陆成功，那么我们进行页面跳转
             =>e如果后端返回的登录失败，那么我们提示用户错误
        */

        //0.获取元素
        //0-1. form标签
        var loginForm = document.querySelector('form')
        //0-2.用户名文本框
        var nameInp= document.querySelector('.username')
        //0-3.密码文本框
        var pwdInp= document.querySelector('.password')
        //0-4.错误提示文本
        var errBox= document.querySelector('.error')

        //1.给form标签绑定一个表单提交事件
        loginForm.onsubmit=function(e){
            //注意：阻止表单的默认提交行为
            e.preventDefault()
            // console.log('我要发送ajax请求')

            //2.拿到填写的用户名和密码
            var name=nameInp.value
            var pwd=pwdInp.value

            //2-2.验证用户名和密码
            if(!name || !pwd)return alert('请完整填写表单')

            console.log(name,pwd)

            //3.发送ajax请求
            var xhr = new XMLHttpRequest()
            xhr.open('POST','http://localhost:8888/users/login',true)
            xhr.onload=function(){
                //因为后端返回的是json格式数据
                var res=JSON.parse(xhr.responseText)
                console.log(res)

                //进行条件判断
                if (res.code===0){
                    //登录失败了
                    errBox.style.display='block'
                }else{
                    //登录成功了
                    window.location.href='./home.html'
                }
            }
            //注意：POST请求携带参数需要提前说明
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

            // POST请求携带参数是在请求体内
            xhr.send('username='+name+'&password='+pwd)
        }
    </script>
</body>
</html>